<template>
	<view class="content">
		<view class="tuijian">
			<image class="bg" src="/static/icon8.png"></image>
			<view class="tui">
				<view class="item" v-for="(item,index) in hotImageData" :key="index" @click="goUrl(item.url)">
					<image :src="item.image"></image>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="shop">
			<block v-if="navList.orderList.length > 0">
				<view class="item" v-for="(item,index) in navList.orderList" :key="index" @click="goDetails">
					<view class="releft">{{applicationLocale=='vi'?item.name.vie:applicationLocale=='zh-Hans'?item.name.zh:item.name.en}}</view>
					<view class="left">
						<image :src="item.imageUrl"></image>
					</view>
					<view class="right">
						<view class="heng1">
							<text class="text1"></text>
							<text class="text2">{{item.price}}</text>
						</view>
						<view class="heng2">
							<view class="text1">{{$t('index.bdbzf')}}</view>
							<text class="text2">{{item.priceRange}}</text>
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: center;text-align: center;width: 100%;">
					<uni-load-more :status="navList.loadingType"></uni-load-more>
				</view>
			</block>
			<block v-else>
				<my-kong></my-kong>
			</block>
		</view>
		<my-popup ref="showYuyan" type="bottom" :maskClick="true" @change="changeYuyan" class="pop-box">
			<view class="uni-tip-yuyan">
				<view class="item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
					<text class="text">{{item.text}}</text>
					<text class="icon-check" v-if="item.code == applicationLocale"></text>
				</view>
			</view>
		</my-popup>
	</view>
</template>

<script>
var _this;
const app = getApp();
import { priceInteger,debounce,priceIntegernew } from "@/utils";
export default {
	data() {
		return {
			pageSize: 10,
			navList: {
				loadingType: 'more',
				page: 1,
				orderList: [],
			},
			hotImageData:[
				{
					image:'/static/icon5.png',
					url:'/pagesnew/me/signIn',
					text: this.$t('index.signf')
				},
				{
					image:'/static/icon7.png',
					url:'share',
					text: this.$t('index.sharef')
				},
				{
					image:'/static/icon1.png',
					url:'kefu',
					text: this.$t('index.kefuf')
				},
				{
					image:'/static/icon10.png',
					url:'language',
					text: this.$t('index.languagef')
				}
			],
			applicationLocale: '',
			isAndroid:'',
		};
	},
	computed:{
	  locales() {
	    return [{
	        text: this.$t('locale.auto'),
	        code: 'auto'
	      }, {
	        text: this.$t('locale.en'),
	        code: 'en'
	      },
	      {
	        text: this.$t('locale.zh-hans'),
	        code: 'zh-Hans'
	      },
	      {
	        text: this.$t('locale.vi'),
	        code: 'vi'
	      }
	    ]
	  }
	},
	onLoad(options) {
		_this = this;
		_this.loadData();
		let systemInfo = uni.getSystemInfoSync();
		this.applicationLocale = uni.getLocale();
		this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
		uni.onLocaleChange((e) => {
		  this.applicationLocale = e.locale;
		})
	},
	onShow() {},
	onPullDownRefresh() {
		this.navList.page = 1;
		this.navList.loadingType = 'more'
		this.navList.orderList=[]
		this.loadData('reset');
	},
	onReachBottom() {
		_this.loadData();
	},
	methods: {
		onLocaleChange(e) {
		  uni.setLocale(e.code);
		  this.$i18n.locale = e.code;
		  window.location.reload()
		},
		loadData(source) {
			var navItem = _this.navList;
			if (navItem.loadingType === 'loading') {
				return;
			}
			if (navItem.loadingType === 'noMore') {
				return;
			}
			navItem.loadingType = 'loading';
			_this.$HTTP({
				method: 'GET',
				url: 'shopServer/box/getNotRecommendBox',
				data: {
					limit: _this.pageSize,
					page: navItem.page,
					time: Date.parse(new Date())
				}
			}).then(res => {
				navItem.page++;
				res.forEach((item,index,arr) => {
					item.name=JSON.parse(item.name)
					item.price = priceIntegernew(item.price);
				});
				uni.stopPullDownRefresh();
				if (source == 'reset') {
					navItem.orderList = res;
				} else {
					res.forEach(item => {
						navItem.orderList.push(item);
					});
				}
				_this.$set(navItem, 'loaded', true);
				
				if (res.length < _this.pageSize) {
					navItem.loadingType = 'noMore';
					return;
				}
				
				navItem.loadingType = 'more';
			}).catch(err => {
				console.log(err);
			});
		},
		goDetails(){
			uni.showModal({
			  content: _this.$t('index.ts1'),
			  cancelText: _this.$t('index.language-cancel-confirm'),
			  confirmText: _this.$t('index.language-sure-confirm'),
			  success: (res) => {
			    if (res.confirm) {
				  if(_this.isSystem()=='Android'){
				  	window.location.href='http://45.207.52.238/web/down/app.apk';
				  }else if(_this.isSystem()=='Iphone'){
					window.location.href='http://down.msbbox.com/ZDaN';
				  }
			    }
			  }
			})
		},
		isSystem() {
			var u = navigator.userAgent;
			var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
			var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			var isIphone = u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;
			if (isAndroid) {
				return "Android";
			}
			if (isiOS || isIphone) {
				return "Iphone";
			}
			return "";
		},
		goUrl(url){
			if(url=='language'){
				_this.openYuyan();
				return;
			}
			_this.goDetails();
		},
		changeYuyan(e) {},
		closeYuyan() {
			_this.$nextTick(() => {
				_this.$refs['showYuyan'].close();
			});
		},
		openYuyan() {
			_this.$nextTick(() => {
				_this.$refs['showYuyan'].open();
			});
		},
	}
};
</script>

<style>
page{
	background: #FEEBDD;
}
</style>
<style lang="scss" scoped>
.uni-tip-yuyan{
	width: 100%;
	height: 635rpx;
	overflow: hidden;
	position: relative;
	background: linear-gradient(180deg, #FFF9EF 0%, #FFFFFF 100%);
	z-index: 10;
	box-sizing: border-box;
	padding: 100rpx 50rpx 0 50rpx;
	.item{
		width: 100%;
		height: 80rpx;
		border-bottom: 1px solid darkgrey;
		.text{
			color: black;
			font-size: 30rpx;
		}
		.icon-check{
			width: 60rpx;
			height: 60rpx;
		}
	}
}
.content {
	width: 100%;
	.tuijian{
		width: 100%;
		height: 882rpx;
		position: relative;
		.bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 750rpx;
		}
		.tui{
			position: absolute;
			width: calc(100% - 64rpx);
			height: 217rpx;
			background: rgba(255, 255, 255, 0.32);
			left: 32rpx;
			top: 296rpx;
			border-radius: 20rpx;
			border: 1px solid #FF9F20;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 28rpx;
			.item{
				width: 120rpx;
				image{
					width: 120rpx;
					height: 120rpx;
				}
				.text{
					width: 120rpx;
					text-align: center;
					font-size: 26rpx;
					color: #682409;
					font-weight: bold;
					margin-top: 6rpx;
				}
			}
		}
	}
	.shop{
		width: 100%;
		box-sizing: border-box;
		padding: 0 16rpx 0 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: flex-start;
		justify-content: flex-start;
		margin-top: -350rpx;
		.item{
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 24rpx 0 24rpx 18rpx;
			width: 335rpx;
			height: 396rpx;
			background: linear-gradient( 180deg, #FFF8E6 0%, #FFFFFF 100%);
			border-radius: 20rpx;
			border: 2rpx solid #FFCF91;
			margin-right: 12rpx;
			position: relative;
			.releft{
				position: absolute;
				left: 0;
				top: 0;
				width: 168rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background-image: url('http://45.207.52.238/web/applet/newimg/icon10.png');
				background-size: 100% 100%;
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: bold;
				z-index: 2;
			}
			.left{
				width: 100%;
				height: 288rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 250rpx;
					height: 250rpx;
				}
			}
			.right{
				width: 100%;
				height: 108rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				background-image: url('http://45.207.52.238/web/applet/newimg/icon2.png');
				background-size: 100% 100%;
				.heng1{
					width: 100%;
					display: flex;
					align-items: center;
					.text1{
						font-size: 24rpx;
						color: #FFFFFF;
						font-weight: bold;
					}
					.text2{
						font-size: 30rpx;
						color: #FFFFFF;
						font-weight: bold;
					}
				}
				.heng2{
					width: 100%;
					box-sizing: border-box;
					padding: 0 12rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					.text1{
						width: 130rpx;
						height: 36rpx;
						background: #FFFFFF;
						border-radius: 9rpx;
						font-size: 24rpx;
						color: #682409;
						text-align: center;
						line-height: 36rpx;
					}
					.text2{
						font-size: 24rpx;
						color: #FFFFFF;
						font-weight: bold;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
}
</style>
